<template>
  <div class="lawyer-statistics">
    <!-- 页面头部 -->
    <header class="page-header">
      <div class="header-content">
        <div class="header-left">
          <h1 class="page-title">数据统计</h1>
          <p class="page-subtitle">律师工作数据统计与分析</p>
        </div>
        <div class="header-actions">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="updateStats"
          />
          <el-button @click="exportReport">
            <i class="fas fa-download mr-2"></i>导出报告
          </el-button>
          <el-button @click="refreshData">
            <i class="fas fa-sync-alt mr-2"></i>刷新
          </el-button>
        </div>
      </div>
    </header>

    <!-- 核心指标 -->
    <div class="key-metrics">
      <div class="metrics-grid">
        <div class="metric-card">
          <div class="metric-icon bg-blue-100">
            <i class="fas fa-briefcase text-blue-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.totalCases }}</h3>
            <p>总案件数</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.caseGrowth }}%</span>
            </div>
          </div>
        </div>
        
        <div class="metric-card">
          <div class="metric-icon bg-green-100">
            <i class="fas fa-trophy text-green-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.winRate }}%</h3>
            <p>胜诉率</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.winRateGrowth }}%</span>
            </div>
          </div>
        </div>
        
        <div class="metric-card">
          <div class="metric-icon bg-orange-100">
            <i class="fas fa-dollar-sign text-orange-600"></i>
          </div>
          <div class="metric-content">
            <h3>￥{{ stats.totalRevenue.toLocaleString() }}</h3>
            <p>总收入</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.revenueGrowth }}%</span>
            </div>
          </div>
        </div>
        
        <div class="metric-card">
          <div class="metric-icon bg-purple-100">
            <i class="fas fa-star text-purple-600"></i>
          </div>
          <div class="metric-content">
            <h3>{{ stats.avgRating }}</h3>
            <p>客户评分</p>
            <div class="metric-trend positive">
              <i class="fas fa-arrow-up"></i>
              <span>+{{ stats.ratingGrowth }}%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="charts-grid">
        <!-- 案件趋势图 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>案件趋势</h3>
            <el-select v-model="caseChartType" size="small">
              <el-option label="月度" value="monthly"></el-option>
              <el-option label="季度" value="quarterly"></el-option>
              <el-option label="年度" value="yearly"></el-option>
            </el-select>
          </div>
          <div class="chart-content">
            <div class="chart-placeholder">
              <i class="fas fa-chart-line text-4xl text-gray-400"></i>
              <p class="text-gray-500">案件数量趋势图</p>
            </div>
          </div>
        </div>

        <!-- 案件类型分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>案件类型分布</h3>
          </div>
          <div class="chart-content">
            <div class="pie-chart-data">
              <div class="pie-item" v-for="item in caseTypeDistribution" :key="item.type">
                <div class="pie-color" :style="{ backgroundColor: item.color }"></div>
                <span class="pie-label">{{ item.type }}</span>
                <span class="pie-value">{{ item.count }}个 ({{ item.percentage }}%)</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 收入分析 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>收入分析</h3>
            <el-select v-model="revenueChartType" size="small">
              <el-option label="按月" value="monthly"></el-option>
              <el-option label="按季度" value="quarterly"></el-option>
            </el-select>
          </div>
          <div class="chart-content">
            <div class="revenue-bars">
              <div class="bar-item" v-for="item in revenueData" :key="item.period">
                <div class="bar-label">{{ item.period }}</div>
                <div class="bar-container">
                  <div class="bar" :style="{ height: item.percentage + '%' }"></div>
                </div>
                <div class="bar-value">￥{{ item.amount.toLocaleString() }}</div>
              </div>
            </div>
          </div>
        </div>

        <!-- 客户满意度 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3>客户满意度</h3>
          </div>
          <div class="chart-content">
            <div class="satisfaction-stats">
              <div class="satisfaction-item" v-for="item in satisfactionData" :key="item.rating">
                <div class="rating-stars">
                  <i v-for="n in 5" :key="n" class="fas fa-star" :class="{ active: n <= item.rating }"></i>
                </div>
                <div class="rating-info">
                  <span class="rating-label">{{ item.rating }}星</span>
                  <div class="rating-bar">
                    <div class="rating-fill" :style="{ width: item.percentage + '%' }"></div>
                  </div>
                  <span class="rating-count">{{ item.count }}人</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="data-tables">
      <div class="table-tabs">
        <div
          v-for="tab in dataTabs"
          :key="tab.key"
          class="table-tab"
          :class="{ active: activeTab === tab.key }"
          @click="setActiveTab(tab.key)"
        >
          <i :class="tab.icon"></i>
          <span>{{ tab.name }}</span>
        </div>
      </div>

      <!-- 案件统计表 -->
      <div v-if="activeTab === 'cases'" class="table-section">
        <el-table :data="caseStats" style="width: 100%">
          <el-table-column prop="type" label="案件类型" width="150"></el-table-column>
          <el-table-column prop="total" label="总数" width="100"></el-table-column>
          <el-table-column prop="pending" label="待处理" width="100"></el-table-column>
          <el-table-column prop="inProgress" label="进行中" width="100"></el-table-column>
          <el-table-column prop="completed" label="已完成" width="100"></el-table-column>
          <el-table-column prop="winRate" label="胜诉率" width="100">
            <template #default="scope">
              {{ scope.row.winRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="avgDuration" label="平均时长" width="120">
            <template #default="scope">
              {{ scope.row.avgDuration }}天
            </template>
          </el-table-column>
          <el-table-column prop="revenue" label="总收入">
            <template #default="scope">
              ￥{{ scope.row.revenue.toLocaleString() }}
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 客户统计表 -->
      <div v-if="activeTab === 'clients'" class="table-section">
        <el-table :data="clientStats" style="width: 100%">
          <el-table-column prop="segment" label="客户类型" width="150"></el-table-column>
          <el-table-column prop="count" label="客户数量" width="120"></el-table-column>
          <el-table-column prop="newClients" label="新增客户" width="120"></el-table-column>
          <el-table-column prop="retentionRate" label="留存率" width="100">
            <template #default="scope">
              {{ scope.row.retentionRate }}%
            </template>
          </el-table-column>
          <el-table-column prop="avgValue" label="平均价值" width="120">
            <template #default="scope">
              ￥{{ scope.row.avgValue.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="satisfaction" label="满意度" width="100">
            <template #default="scope">
              {{ scope.row.satisfaction }}/5
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 财务统计表 -->
      <div v-if="activeTab === 'finance'" class="table-section">
        <el-table :data="financeStats" style="width: 100%">
          <el-table-column prop="period" label="时期" width="120"></el-table-column>
          <el-table-column prop="revenue" label="收入" width="150">
            <template #default="scope">
              ￥{{ scope.row.revenue.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="costs" label="成本" width="150">
            <template #default="scope">
              ￥{{ scope.row.costs.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="profit" label="利润" width="150">
            <template #default="scope">
              ￥{{ scope.row.profit.toLocaleString() }}
            </template>
          </el-table-column>
          <el-table-column prop="profitMargin" label="利润率" width="100">
            <template #default="scope">
              {{ scope.row.profitMargin }}%
            </template>
          </el-table-column>
          <el-table-column prop="growth" label="增长率">
            <template #default="scope">
              <span :class="{ 'text-green-600': scope.row.growth > 0, 'text-red-600': scope.row.growth < 0 }">
                {{ scope.row.growth > 0 ? '+' : '' }}{{ scope.row.growth }}%
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

export default {
  name: 'LawyerStatistics',
  setup() {
    // 响应式数据
    const dateRange = ref([
      dayjs().subtract(30, 'day').toDate(),
      dayjs().toDate()
    ])
    const caseChartType = ref('monthly')
    const revenueChartType = ref('monthly')
    const activeTab = ref('cases')
    
    // 统计数据
    const stats = reactive({
      totalCases: 156,
      caseGrowth: 12.5,
      winRate: 85,
      winRateGrowth: 3.2,
      totalRevenue: 1250000,
      revenueGrowth: 18.7,
      avgRating: 4.8,
      ratingGrowth: 2.1
    })
    
    // 案件类型分布
    const caseTypeDistribution = ref([
      { type: '民事纠纷', count: 45, percentage: 28.8, color: '#3b82f6' },
      { type: '劳动争议', count: 32, percentage: 20.5, color: '#10b981' },
      { type: '合同纠纷', count: 28, percentage: 17.9, color: '#f59e0b' },
      { type: '交通事故', count: 25, percentage: 16.0, color: '#ef4444' },
      { type: '房产纠纷', count: 18, percentage: 11.5, color: '#8b5cf6' },
      { type: '其他', count: 8, percentage: 5.1, color: '#6b7280' }
    ])
    
    // 收入数据
    const revenueData = ref([
      { period: '1月', amount: 95000, percentage: 76 },
      { period: '2月', amount: 88000, percentage: 70 },
      { period: '3月', amount: 125000, percentage: 100 },
      { period: '4月', amount: 110000, percentage: 88 },
      { period: '5月', amount: 135000, percentage: 108 },
      { period: '6月', amount: 98000, percentage: 78 }
    ])
    
    // 客户满意度数据
    const satisfactionData = ref([
      { rating: 5, count: 89, percentage: 85 },
      { rating: 4, count: 12, percentage: 11 },
      { rating: 3, count: 3, percentage: 3 },
      { rating: 2, count: 1, percentage: 1 },
      { rating: 1, count: 0, percentage: 0 }
    ])
    
    // 数据表格标签
    const dataTabs = [
      { key: 'cases', name: '案件统计', icon: 'fas fa-briefcase' },
      { key: 'clients', name: '客户统计', icon: 'fas fa-users' },
      { key: 'finance', name: '财务统计', icon: 'fas fa-chart-bar' }
    ]
    
    // 案件统计数据 - 交通事故专业
    const caseStats = ref([
      {
        type: '机动车交通事故',
        total: 52,
        pending: 12,
        inProgress: 18,
        completed: 22,
        winRate: 89,
        avgDuration: 95,
        revenue: 680000
      },
      {
        type: '行人交通事故',
        total: 28,
        pending: 6,
        inProgress: 10,
        completed: 12,
        winRate: 92,
        avgDuration: 110,
        revenue: 520000
      },
      {
        type: '电动车事故',
        total: 35,
        pending: 8,
        inProgress: 14,
        completed: 13,
        winRate: 85,
        avgDuration: 85,
        revenue: 380000
      },
      {
        type: '货车事故',
        total: 18,
        pending: 3,
        inProgress: 7,
        completed: 8,
        winRate: 94,
        avgDuration: 125,
        revenue: 450000
      },
      {
        type: '酒驾肇事',
        total: 15,
        pending: 2,
        inProgress: 6,
        completed: 7,
        winRate: 96,
        avgDuration: 140,
        revenue: 320000
      }
    ])
    
    // 客户统计数据 - 交通事故当事人
    const clientStats = ref([
      {
        segment: '事故受害人',
        count: 92,
        newClients: 28,
        retentionRate: 82,
        avgValue: 15800,
        satisfaction: 4.8
      },
      {
        segment: '肇事方当事人',
        count: 45,
        newClients: 12,
        retentionRate: 75,
        avgValue: 8500,
        satisfaction: 4.5
      },
      {
        segment: '企业车辆事故',
        count: 28,
        newClients: 8,
        retentionRate: 88,
        avgValue: 35000,
        satisfaction: 4.9
      },
      {
        segment: '保险理赔纠纷',
        count: 38,
        newClients: 15,
        retentionRate: 79,
        avgValue: 12500,
        satisfaction: 4.6
      }
    ])
    
    // 财务统计数据
    const financeStats = ref([
      {
        period: '2024年1月',
        revenue: 95000,
        costs: 28500,
        profit: 66500,
        profitMargin: 70,
        growth: 12.5
      },
      {
        period: '2024年2月',
        revenue: 88000,
        costs: 26400,
        profit: 61600,
        profitMargin: 70,
        growth: -7.4
      },
      {
        period: '2024年3月',
        revenue: 125000,
        costs: 37500,
        profit: 87500,
        profitMargin: 70,
        growth: 42.0
      }
    ])
    
    // 方法
    const refreshData = () => {
      ElMessage.success('数据已刷新')
    }
    
    const updateStats = () => {
      ElMessage.info('统计数据已更新')
    }
    
    const exportReport = () => {
      ElMessage.success('报告导出成功')
    }
    
    const setActiveTab = (tab) => {
      activeTab.value = tab
    }
    
    return {
      dateRange,
      caseChartType,
      revenueChartType,
      activeTab,
      stats,
      caseTypeDistribution,
      revenueData,
      satisfactionData,
      dataTabs,
      caseStats,
      clientStats,
      financeStats,
      refreshData,
      updateStats,
      exportReport,
      setActiveTab
    }
  }
}
</script>

<style scoped>
.lawyer-statistics {
  padding: 24px;
  background-color: #f9fafb;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.page-subtitle {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* 核心指标 */
.key-metrics {
  margin-bottom: 24px;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.metric-icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.metric-icon i {
  font-size: 28px;
}

.metric-content h3 {
  font-size: 32px;
  font-weight: bold;
  margin: 0 0 4px 0;
  color: #1f2937;
}

.metric-content p {
  margin: 0 0 8px 0;
  color: #6b7280;
  font-size: 14px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.metric-trend.positive {
  color: #10b981;
}

.metric-trend.negative {
  color: #ef4444;
}

/* 图表区域 */
.charts-section {
  margin-bottom: 24px;
}

.charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.chart-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.chart-content {
  height: 300px;
}

.chart-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 饼图数据 */
.pie-chart-data {
  padding: 20px 0;
}

.pie-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.pie-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.pie-label {
  flex: 1;
  font-weight: 500;
  color: #374151;
}

.pie-value {
  font-size: 14px;
  color: #6b7280;
}

/* 收入柱状图 */
.revenue-bars {
  display: flex;
  justify-content: space-around;
  align-items: end;
  height: 250px;
  padding: 20px 0;
}

.bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.bar-label {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

.bar-container {
  flex: 1;
  width: 32px;
  display: flex;
  align-items: end;
  margin-bottom: 8px;
}

.bar {
  width: 100%;
  background: linear-gradient(to top, #3b82f6, #60a5fa);
  border-radius: 4px 4px 0 0;
  min-height: 20px;
}

.bar-value {
  font-size: 11px;
  font-weight: 500;
  color: #374151;
}

/* 满意度统计 */
.satisfaction-stats {
  padding: 20px 0;
}

.satisfaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.rating-stars {
  display: flex;
  gap: 2px;
}

.rating-stars i {
  font-size: 14px;
  color: #d1d5db;
}

.rating-stars i.active {
  color: #fbbf24;
}

.rating-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-label {
  width: 40px;
  font-size: 14px;
  color: #374151;
}

.rating-bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.rating-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.rating-count {
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: #6b7280;
}

/* 数据表格 */
.data-tables {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.table-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.table-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  border-bottom: 2px solid transparent;
}

.table-tab:hover {
  color: #374151;
}

.table-tab.active {
  color: #3b82f6;
  border-bottom-color: #3b82f6;
}

.table-section {
  margin-top: 20px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .header-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .lawyer-statistics {
    padding: 16px;
  }
  
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .table-tabs {
    justify-content: center;
    flex-wrap: wrap;
  }
}
</style>
